.legend-item,
.legend-item__placeholder {
	display: flex;
	align-items: flex-start;
	flex-direction: column;
}

.legend-item__title,
.legend-item__placeholder-title {
	display: flex;
	align-items: center;
	height: 21px;
}

.legend-item__detail-description,
.legend-item__placeholder-detail-description,
.legend-item__detail-value,
.legend-item__placeholder-detail-value,
.legend-item__title-name,
.legend-item__placeholder-title-name {
	font-size: $font-body-small;
}

.legend-item__title-sample-drawing,
.legend-item__placeholder-title-sample-drawing {
	height: 12px;
	width: 12px;
	margin-right: 7px;
}

.legend-item__detail,
.legend-item__placeholder-detail {
	margin-left: 20px;
}

.legend-item__detail-description {
	color: var( --color-text-subtle );
}

.legend-item__placeholder-title-name,
.legend-item__placeholder-title-circle,
.legend-item__placeholder-detail {
	@include placeholder();

	&::after {
		content: '';
	}
	border: 2px solid var( --color-border-inverted );
}

.legend-item__placeholder-detail {
	height: 42px;
	box-sizing: border-box;
}

.legend-item__placeholder-title-circle {
	fill: var( --color-neutral-0 );
	@include placeholder();
}
